<template>
  <view class="lang-switch">
    <picker @change="onLanguageChange" :value="currentIndex" :range="languages" range-key="label">
      <view class="lang-picker">
        <text>{{ currentLanguage.label }}</text>
        <text class="iconfont icon-down"></text>
      </view>
    </picker>
  </view>
</template>

<script>
import { setLanguage } from '../locale'

export default {
  name: 'LangSwitch',
  data() {
    return {
      languages: [
        { value: 'zh-CN', label: '中文' },
        { value: 'en', label: 'English' },
        { value: 'fr', label: 'Français' }
      ],
      currentIndex: 0
    }
  },
  computed: {
    currentLanguage() {
      const locale = this.$i18n.locale
      const lang = this.languages.find(item => item.value === locale)
      
      // 更新当前索引
      this.currentIndex = this.languages.findIndex(item => item.value === locale)
      
      return lang || this.languages[0]
    }
  },
  methods: {
    onLanguageChange(e) {
      const index = e.detail.value
      const lang = this.languages[index].value
      
      if (lang !== this.$i18n.locale) {
        setLanguage(lang)
        
        // 可选：切换语言后刷新页面或显示提示
        uni.showToast({
          title: this.$t('common.langSwitchSuccess'),
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.lang-switch {
  padding: 5px 10px;
}
.lang-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style> 